<template>
	<view>
		<u-navbar back-text="返回" title="高透明有机玻璃板" title-width="450" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
		</u-navbar>
		<view class="top-box">
			<image src="../../../static/images/develop/dev1.png" mode=""></image>
		</view>
		<view class="center-box">
			<view class="title">
				高透明有机玻璃板
			</view>
			<view class="text">
				选用高品质原材料，高度机械化加工，质量保障。选用高品质原材料，高度机械化加工，质量保障。
			</view>
			<view class="add-cart">
				<view class="left">
					￥655 <text>已售：888</text>
				</view>
				<view class="right">
					<view class="icon">
						<image src="../../../static/images/buildingmaterials/add.png" mode=""></image>
					</view>
					加入购物车
				</view>
			</view>
			<view class="good-size">
				<view class="left">
					选择 <text>选择规格</text>
				</view>
				<view class="right">
					<image src="../../../static/images/buildingmaterials/select-icon.png" mode=""></image>
				</view>
			</view>
			<view class="goods-info">
				<view class="goods-box">
					<view class="info-item">
						磨砂
					</view>
					<view class="info-item">
						透明
					</view>
					<view class="info-item">
						高强度
					</view>
				</view>
			</view>
			<view class="good-size">
				<view class="left">
					参数 <text>品牌型号</text>
				</view>
				<view class="right">
					<image src="../../../static/images/buildingmaterials/select-icon.png" mode=""></image>
				</view>
			</view>
			<view class="goods-info">
				<view class="goods-type">
					<view class="item">
						<text>品牌</text>强好用（基础建材）
					</view>
					<view class="item">
						<text>品牌</text>强好用（基础建材）
					</view>
					<view class="item">
						<text>品牌</text>强好用（基础建材）
					</view>
				</view>
			</view>
			<view class="info-text">
				详情介绍
			</view>
			<view class="goods-img">
				<image src="../../../static/images/develop/dev1.png" mode=""></image>
			</view>
		</view>
		<cart></cart>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.top-box{
		width: 100%;
		height: 400rpx;
		image{
			width: 100%;
			height: 400rpx;
		}
	}
	.center-box{
		padding: 40rpx 30rpx;
		.title{
			font-size:32rpx;
			font-weight:600;
			line-height:43rpx;
			color:rgba(51,51,51,1);
			opacity:1;
		}
		.text{
			margin-top: 10rpx;
			font-size:24rpx;
			font-weight:400;
			line-height:32rpx;
			color:rgba(102,102,102,1);
			opacity:1;
		}
		.add-cart{
			margin-top: 20rpx;
			display: flex;
			.left{
				flex: 1;
				font-size:32rpx;
				font-weight:600;
				line-height:43px;
				color:rgba(255,0,0,1);
				opacity:1;
				text{
					display: inline-block;
					margin-left: 36rpx;
					font-size:22rpx;
					font-weight:400;
					color:rgba(153,153,153,1);
					opacity:1;
				}
			}
			.right{
				margin-top: 36rpx;
				width:216rpx;
				height:60rpx;
				background:rgba(228,205,112,1);
				opacity:1;
				border-radius:60rpx;
				line-height: 60rpx;
				display: flex;
				.icon{
					width: 25rpx;
					height: 25rpx;
					margin-bottom: 18rpx;
					margin-left: 26rpx;
					margin-right: 10rpx;
					image{
						width: 25rpx;
						height: 25rpx;
					}
				}
			}
		}
		.good-size{
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			width: 100%;
			.left{
				line-height: 35rpx;
				font-size:24rpx;
				font-weight:400;
				color:rgba(153,153,153,1);
				opacity:1;
				text{
					display: inline-block;
					margin-left: 20rpx;
					font-size:26rpx;
					font-weight:600;
					color:rgba(51,51,51,1);
					opacity:1;
				}
			}
			.right{
				width: 24rpx;
				height: 14rpx;
				image{
					width: 24rpx;
					height: 14rpx;
				}
			}
		}
		.goods-info{
			padding-left: 72rpx;
			width: 100%;
			box-sizing: border-box;
			margin-top: 40rpx;
			.goods-box{
				display: flex;
				padding-bottom: 40rpx;
				width: 100%;
				border-bottom: 1rpx solid rgba(223,223,223,1);
				.item{
					font-size:24rpx;
					font-weight:600;
					line-height:32rpx;
					color:rgba(51,51,51,1);
					opacity:1;
					text{
						display: inline-block;
						margin-right: 20rpx;
						font-size:24rpx;
						font-weight:400;
						color:rgba(153,153,153,1);
						opacity:1;
					}
				}
			}
			.goods-type{
				padding-bottom: 20rpx;
				width: 100%;
				border-bottom: 1rpx solid rgba(223,223,223,1);
				.item{
					margin-bottom: 20rpx;
					font-size:24rpx;
					font-weight:600;
					line-height:32rpx;
					color:rgba(51,51,51,1);
					opacity:1;
					text{
						display: inline-block;
						margin-right: 20rpx;
						font-size:24rpx;
						font-weight:400;
						color:rgba(153,153,153,1);
						opacity:1;
					}
				}
			}
			.info-item{
				padding: 0 10rpx;
				box-sizing: border-box;
				margin-right: 20rpx;
				height:40rpx;
				background:rgba(246,246,246,1);
				opacity:1;
				border-radius:6rpx;
				line-height: 40rpx;
				font-size:24rpx;
				font-weight:400;
				color:rgba(51,51,51,1);
				opacity:1;
			}
		}
		.info-text{
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			font-size:30rpx;
			font-weight:600;
			line-height:40rpx;
			color:rgba(51,51,51,1);
			opacity:1;
		}
		.goods-img{
			width: 100%;
			image{
				width: 100%;
			}
		}
	}
</style>
